<template>
  <div class="content">
    <!-- 头部 -->
    <div class="headner flex jc-sb">
      <div class="spxq">
        <div class="quna"></div>
        <span class="xiq">视频详情</span>
      </div>
      <div class="btn flex">
        <div class="bianji" v-if="activeName != 'second'" @click="editshow">
          编辑
        </div>
        <div class="bianji" v-show="
          $route.path === '/layout/videoaudit' && activeName != 'second'
        " style="margin-left: 20px" @click="audit">
          审核
        </div>
        <div class="bianji ganhui" @click="back">返回</div>
      </div>
    </div>
    <div class="example">
      <el-backtop :right="400">
        <i style="color: #ff5478; font-size: 25px" class="el-icon-top"></i>
      </el-backtop>
      <!-- 身体 -->
      <div class="bodytitle flex">
        <div style="position: relative" class="bodylefts">
          <div class="title">{{ info.name }}</div>
          <div class="cls">发布于{{ info.createTime }}</div>
          <div class="fenqu" v-if="info.categoryVo">
            当前分区：
            <span>{{ info.partitionId | wherearea }}>></span>
            <span>{{ info.categoryVo.name }}>></span>
            <span v-if="info.categoryVo.sonCategoryList">{{
                info.categoryVo.sonCategoryList[0].name
            }}</span>
          </div>
          <div style="position: relative" class="video">
            <video @click="stopvideo" @ended="ended" autoplay id="video" :src="info.url" @error="playerror">
              您的浏览器不支持 video 标签。
              <source :src="info.url" type="video/mp4" />
              <source :src="info.url" type="video/egg" />
            </video>
            <div class="diwei" v-if="isStart" @click="playstatrt">
              <i class="el-icon-video-play"></i>
            </div>
            <div class="loadings" v-if="iswaiting && !isStart">
              <div class="icoloading">
                <i class="el-icon-loading"></i>
                <div>{{ ukbs }}/s</div>
              </div>
            </div>
          </div>

          <div class="controls flex ai-c jc-sb">
            <div class="flex ai-c">
              <img class="cursor" @click="playstatrt" v-if="isStart" id="playpause" src="@/assets/videostatrt.png"
                style="width: 16px; height: 18px" alt="" />
              <img class="cursor" @click="stopvideo" v-if="!isStart" id="stoppause" src="@/assets/videostop.png"
                style="width: 16px; height: 18px" alt="" />
              <el-slider @change="setprogressbar" :show-tooltip="false" class="jindu" :min="0" :max="480"
                v-model="progress"></el-slider>
              <!-- <div class="jindu" @click="setprogressbar($event)">
              <div class="jindufinish"></div>
            </div> -->
              <div class="tiem">
                {{ currentTimetotal }} / {{ durationtotal }}
              </div>
              <img style="width: 19px; height: 16px" src="@/assets/videoling.png" alt="" />
              <el-slider @change="setvoice" class="voice" v-model="voice"></el-slider>
              <div class="beisu">
                <span class="span1">{{ spanval }}</span>
                <div class="parse">
                  <div @click="setbei(1)">1x</div>
                  <div @click="setbei(1.5)">1.5x</div>
                  <div @click="setbei(2)">2x</div>
                  <div @click="setbei(2.5)">2.5x</div>
                  <div @click="setbei(3)">3x</div>
                </div>
              </div>
            </div>
            <img @click="fullScreen" style="width: 20px; height: 20px" src="@/assets/videobig.png" alt="" />
          </div>
          <!-- 新增评论详情，产品详情 -->
          <div class="detals flex fd-c" v-show="!showDetails">
            <div class="chinse flex">
              <span v-if="
                (info.commentDetailImgs &&
                  info.commentDetailImgs.length > 0) ||
                info.commentContent
              " class="pingku cursor" :class="{ colorActive: colorActive == 1 }" @click="setphone(1)">评论详情</span>
              <span v-if="
                info.productDetailImgs && info.productDetailImgs.length > 0
              " class="pingku cursor" :class="{ colorActive: colorActive == 2 }" @click="setphone(2)">产品详情</span>
            </div>
            <div class="elimage flex ai-c jc-c">
              <div style="padding-left: 150px; box-sizing: border-box" v-html="str"
                v-if="info.commentContent && colorActive == 1"></div>
              <div v-else>
                <el-image fit="contain" v-for="it in detailsImgs" :key="it" :preview-src-list="[it]" :src="it">
                  <div slot="error" class="image-slot">暂无图片</div>
                </el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="w310">
          <div class="cent">
            <div class="h115 flex ai-c jc-sb">
              <div class="flex ai-c cursor">
                <img v-if="info.headPic" :src="info.headPic" style="width: 54px; height: 54px; border-radius: 50%"
                  alt="" />
                <img v-else src="/user/img/touxiang.png" style="width: 54px; height: 54px; border-radius: 50%" alt="" />
                <div class="daw">{{ info.account }}</div>
              </div>
            </div>
            <div class="mb20 flex">
              <div class="xia">下载积分</div>
              <div class="hsnde">{{ info.scoreCard }}</div>
            </div>
            <div class="mb20 flex">
              <div class="xia">上传积分</div>
              <div class="hsnde">{{ info.uploadScoreCard }}</div>
            </div>
            <div class="mb20 flex">
              <div class="xia">下载次数</div>
              <div class="hsnde">{{ info.downloadNum }}</div>
            </div>
            <div v-if="info.tiktokLikeNum && !showDetails" class="mb20 flex">
              <div class="xia">抖音点赞</div>
              <div class="hsnde">{{ info.tiktokLikeNum }}</div>
            </div>
            <div v-if="info.tiktokCommentNum && !showDetails" class="mb20 flex">
              <div class="xia">抖音评论</div>
              <div class="hsnde">{{ info.tiktokCommentNum }}</div>
            </div>
            <div v-if="info.tiktokForwardNum && !showDetails" class="mb20 flex">
              <div class="xia">抖音转发</div>
              <div class="hsnde">{{ info.tiktokForwardNum }}</div>
            </div>
            <div v-if="info.tiktokCollectionNum && !showDetails" class="mb20 flex">
              <div class="xia">抖音收藏数</div>
              <div class="hsnde">{{ info.tiktokCollectionNum }}</div>
            </div>
            <div class="mb20">
              <div class="xia">视频标签</div>
              <div class="spanhsnde">
                <el-tag class="cursor" v-for="it in info.tagVoList" :key="it.id">{{
                    it.name
                }}</el-tag>
              </div>
            </div>
            <div class="mb20 flex">
              <div class="xia">视频类型</div>
              <div class="hsnde">{{ info.type | filtertype }}视频</div>
            </div>
            <div class="mb20" v-if="info.introduction">
              <div class="xia">视频说明</div>
              <span class="usj">{{ info.introduction }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      default: () => {
        return {};
      },
    },
    activeName: {
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      detailsImgs: [],
      detailsImg: "",
      colorActive: 1,
      delShow: false,
      confirmationShow: false,
      radio: 1,
      imageUrl: "",
      // 是否显示详情按钮
      isdetailsshow: false,
      loading: false,
      morelist: [],
      isStart: true,
      // 视频的总时长
      duration: 0,
      // 获取当前播放时间
      currentTime: 0,
      // 控制定时器
      realTimeUpdate: null,
      durationtotal: "00:00:00",
      currentTimetotal: "00:00:00",
      hour: "00",
      seconds: "00",
      minute: "00",
      voice: 60,
      spanval: "1x",
      progress: 0,
      voucherUrl: "",
      userinfo: "",
      // 是否显示wating
      iswaiting: false,
      ukbs: "400KB",
      timens: null,
      // 评论详情数组
      arrayCommontList: [],
      str: "",
    };
  },
  activated() { },
  watch: {
    info: {
      handler() {
        this.personalvideoinfo();
      },
      immediate: true,
    },
  },
  computed: {
    showDetails() {
      return this.info.partitionId === 3 || this.info.partitionId === 4;
    },
  },
  filters: {
    wherearea(val) {
      if (val == 2) {
        return "案例区";
      } else if (val == 3) {
        return "成品区";
      } else if (val == 4) {
        return "素材区";
      } else {
        return "任务区";
      }
    },
    filtertype(val) {
      if (val == 10) {
        return "公开";
      } else {
        return "小组";
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.realTimeUpdate);
    clearInterval(this.timens);
  },
  mounted() {
    setTimeout(() => {
      let elVideo = document.querySelector("#video");
      elVideo.onwaiting = () => {
        this.iswaiting = true;
        this.timens = setInterval(() => {
          this.ukbs = this.sizechange(this.measurebw());
        }, 1000);
      };
      elVideo.onplaying = (e) => {
        this.iswaiting = false;
        clearInterval(this.timens);
      };
      elVideo.addEventListener("loadedmetadata", () => {
        // 控制默认音量
        elVideo.volume = 0.6;
        this.duration = parseInt(elVideo.duration); //  获取视频总长度
        this.durationtotal = this.format(this.duration);
        this.currentTime = elVideo.currentTime; //  获取当前播放时间
        if (elVideo.readyState <= 0) {
          //  判断视频是否能够正常读取
          this.$message({
            type: "error",
            message: "视频加载失败",
          });
          return;
        }
        window.onresize = () => {
          let elVideo = document.querySelector("#video");
          if (this.checkFullScreen()) {
            this.getProgress();
            elVideo.pause();
            this.isStart = true;
          } else {
            this.getProgress();
            elVideo.pause();
            this.isStart = true;
          }
          clearInterval(this.realTimeUpdate);
        };
        var eltooltip = document.querySelector(".el-slider__button-wrapper");
        eltooltip.addEventListener("mousedown", () => {
          this.stopvideo();
        });
        elVideo.addEventListener("play", () => {
          this.isStart = false;
          this.realTimeUpdate = setInterval(this.getProgress, 100);
        });
        elVideo.addEventListener("pause", () => {
          this.isStart = true;
          clearInterval(this.realTimeUpdate);
        });
      });
    }, 20);
  },
  methods: {
    editshow() {
      this.$emit("edidshow", this.info);
    },
    audit() {
      this.$emit("audit", this.info);
    },
    back() {
      this.$emit("back");
    },
    gohomepage() {
      let user = JSON.parse(localStorage.getItem("userinfo")).account;
      if (this.info.account == user) {
        this.$router.push({
          path: "/set",
        });
      } else {
        this.$router.push({
          path: "/hishomepage",
          query: {
            account: this.info.account,
          },
        });
      }
    },
    sizechange(limit) {
      var size = "";
      if (limit < 0.1 * 1024) {
        //小于0.1KB，则转化成B
        size = limit.toFixed(2) + "B";
      } else if (limit < 0.1 * 1024 * 1024) {
        //小于0.1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {
        //小于0.1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }

      var sizeStr = size + ""; //转成字符串
      var index = sizeStr.indexOf("."); //获取小数点处的索引
      var dou = sizeStr.substr(index + 1, 2); //获取小数点后两位的值
      if (dou == "00") {
        //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
      }
      return size;
    },
    measurebw() {
      return ((navigator.connection.downlink * 1024) / 8) * 1024;
    },
    handelclassification(it) {
      let obj = JSON.stringify({
        partitionType: this.info.partitionId,
        levelone: {
          name: this.info.categoryVo.name,
          id: this.info.categoryVo.id,
        },
        leveltwo: {
          name: this.info.categoryVo.sonCategoryList[0].name,
          id: this.info.categoryVo.sonCategoryList[0].id,
        },
        tags: it.id,
      });
      this.$router.push({
        path: "/classification",
        query: {
          obj,
        },
      });
    },
    setphone(index) {
      this.colorActive = index;
      if (index == 1) {
        this.detailsImg = this.info.commentDetailImgs[0];
        this.detailsImgs = this.info.commentDetailImgs;
      } else {
        this.detailsImg = this.info.productDetailImgs[0];
        this.detailsImgs = this.info.productDetailImgs;
      }
    },
    playerror(e) {
      console.log(e);
      this.$message.error("该视频格式不支持浏览器播放，建议转成mp4");
    },
    govideodetails(item) {
      let url = location.origin + location.pathname;
      window.open(url + `#/videodetails?videoId=${item.id}`);
    },
    goCategory(val, level) {
      const routeArr = [
        "casearea",
        "finishedproductarea",
        "materialarea",
        "taskarea",
      ];
      const obj = {
        partitionType: val.partitionId,
        levelone: {},
        leveltwo: {},
      };
      const son = val.sonCategoryList[0];
      let objs = "";
      if (level === "1") {
        this.$router.push({
          path: routeArr[val.partitionId - 2],
        });
      } else {
        if (level === "2") {
          obj.levelone = {
            name: val.name,
            id: val.id,
          };
          objs = JSON.stringify(obj);
        }
        if (level === "3") {
          obj.levelone = {
            name: val.name,
            id: val.id,
          };
          obj.leveltwo = {
            name: son.name,
            id: son.id,
          };
          objs = JSON.stringify(obj);
        }
        this.$router.push({
          path: "/classification",
          query: {
            obj: objs,
          },
        });
      }
    },
    imgsuccess(imgUrl) {
      this.voucherUrl = imgUrl;
    },
    userpersonalfocus() {
      userpersonalfocus({
        account: this.info.account,
      }).then((res) => {
        console.log(res);
        this.info.isFocus = true;
      });
    },
    userpersonalcancelfocus() {
      userpersonalcancelfocus({
        account: this.info.account,
      }).then((res) => {
        console.log(res);
        this.info.isFocus = false;
      });
    },
    setbei(val) {
      let elVideo = document.querySelector("#video");
      elVideo.playbackRate = val;
      this.spanval = val + "x";
    },
    checkFullScreen() {
      var isFull =
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement;
      if (isFull == null || isFull == undefined) {
        isFull = false;
      }
      return isFull;
    },
    fullScreen() {
      let elVideo = document.querySelector("#video");
      elVideo.webkitRequestFullScreen();
    },
    setvoice(val) {
      let elVideo = document.querySelector("#video");
      elVideo.volume = val / 100;
    },
    ended() {
      clearInterval(this.realTimeUpdate);
      this.isStart = true;
      let elVideo = document.querySelector("#video");
      this.progress = 0;
      elVideo.currentTime = 0;
      this.currentTimetotal = "00:00:00";
    },
    // video的播放条
    getProgress() {
      let elVideo = document.querySelector("#video");
      var percent = elVideo.currentTime / this.duration;
      var elPg = document.querySelector(".jindu");
      this.progress = percent * elPg.offsetWidth;
      this.currentTimetotal = this.format(parseInt(elVideo.currentTime));
    },
    format(seconds) {
      let hour =
        Math.floor(seconds / 3600) >= 10
          ? Math.floor(seconds / 3600)
          : "0" + Math.floor(seconds / 3600);
      seconds -= 3600 * hour;
      let min =
        Math.floor(seconds / 60) >= 10
          ? Math.floor(seconds / 60)
          : "0" + Math.floor(seconds / 60);
      seconds -= 60 * min;
      let sec = seconds >= 10 ? seconds : "0" + seconds;
      return hour + ":" + min + ":" + sec;
    },
    playstatrt() {
      this.isStart = false;
      console.log(document.querySelector("#video"));
      document.querySelector("#video").play();
    },
    stopvideo() {
      this.isStart = !this.isStart;
      if (this.isStart) {
        document.querySelector("#video").pause();
      } else {
        document.querySelector("#video").play();
      }
    },
    personalvideomore() {
      this.loading = true;
      personalvideomore({
        videoId: this.$route.query.videoId,
      })
        .then((res) => {
          this.loading = false;
          this.morelist = res.data;
          console.log(res);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    setprogressbar(e) {
      var elPg = document.querySelector(".jindu");
      let elVideo = document.querySelector("#video");
      var elPgW = elPg.offsetWidth;
      elVideo.currentTime = parseFloat((e / elPgW) * this.duration);
      this.currentTimetotal = this.format(parseInt(elVideo.currentTime));
      this.progress = e;
      if (!this.realTimeUpdate) {
        this.playstatrt();
      }
    },
    personalvideoinfo() {
      var str = "";
      if (this.info.commentContent) {
        if (this.info.commentContent.indexOf('\r\n') > 0) {
          this.arrayCommontList = this.info.commentContent.split("\r\n");
          for (let i = 0; i < this.arrayCommontList.length; i++) {
            if (i % 6 == 0) {
              str += `<div style="margin-top: 10px">
                  <div>
                   <span style="font-size: 13px; font-weight: 400; color: #d4d2d2">
                    ${this.arrayCommontList[i]}
                  </span>
                  <span
                    style="
                      font-size: 12px;
                      font-weight: 400;
                      color: #ffffff80;
                      margin-left: 10px;
                    "
                  >
                      ${this.arrayCommontList[i + 1]}
                  </span>
                  </div>
                <div
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    color: hsl(0deg 0% 100% / 90%);
                  
                  "
                >
                     ${this.arrayCommontList[i + 2]}
                </div>
                <div>
                  <span
                    style="
                      color: hsl(0deg 0% 100% / 70%);
                      font-size: 12px;
                      font-weight: 500;
                    "
                  >
                    ❤  ${this.arrayCommontList[i + 3]}
                  </span>
                  <span
                    style="
                      color: hsl(0deg 0% 100% / 70%);
                      margin-left: 10px;
                      font-size: 12px;
                      font-weight: 500;
                    "
                  >
                    <i class="el-icon-chat-round"></i> 回复
                  </span>
                </div>
                <div style="color:hsl(0deg 0% 100% / 50%);font-size: 12px;
    font-weight: 400;">
             ${this.arrayCommontList[i + 5].indexOf("None") > -1
                  ? ""
                  : this.arrayCommontList[i + 5]
                }
                </div>
              </div>`;
            }
          }
          this.str = str;
        } else {
          this.arrayCommontList = this.info.commentContent.split("\n");
          for (let i = 0; i < this.arrayCommontList.length; i++) {
            if (this.arrayCommontList[i] === "...") {
              str += `<div style="margin-top: 10px">
                  <div>
                   <span style="font-size: 13px; font-weight: 400; color: #d4d2d2">
                    ${this.arrayCommontList[i - 2]}
                  </span>
                  <span
                    style="
                      font-size: 12px;
                      font-weight: 400;
                      color: #ffffff80;
                      margin-left: 10px;
                    "
                  >
                      ${this.arrayCommontList[i - 1]}
                  </span>
                  </div>
                <div
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    color: hsl(0deg 0% 100% / 90%);
                  
                  "
                >
                     ${this.arrayCommontList[i + 1]}
                </div>
                <div>
                  <span
                    style="
                      color: hsl(0deg 0% 100% / 70%);
                      font-size: 12px;
                      font-weight: 500;
                    "
                  >
                    ❤  ${this.arrayCommontList[i + 2]}
                  </span>
                  <span
                    style="
                      color: hsl(0deg 0% 100% / 70%);
                      margin-left: 10px;
                      font-size: 12px;
                      font-weight: 500;
                    "
                  >
                    <i class="el-icon-chat-round"></i> 回复
                  </span>
                </div>
                <div style="color:hsl(0deg 0% 100% / 50%);font-size: 12px;
    font-weight: 400;">
             ${this.arrayCommontList[i + 4].indexOf("展开") > -1
                  ? this.arrayCommontList[i + 4]
                  : ""
                }
                </div>
              </div>`;
            }
          }
          this.str = str;
        }
      }
      this.detailsImg = this.info.commentDetailImgs[0];
      this.detailsImgs = this.info.commentDetailImgs;
    },
  },
};
</script>
<style lang='scss' scoped>
.headner {
  height: 38px;
  position: relative;

  .quna {
    width: 18px;
    height: 18px;
    background: linear-gradient(-39deg, #ff5478, #f79bc0);
    opacity: 0.9;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .xiq {
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #2f3034;
  }

  .bianji {
    width: 90px;
    height: 38px;
    background: #ff5478;
    border-radius: 5px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
  }

  .ganhui {
    background: #ffffff;
    color: #686a71;
    margin-left: 20px;
  }
}
</style>
<style lang='scss' scoped>
.diwei {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;

  .el-icon-video-play {
    color: #ff5478;
    font-size: 40px;
    cursor: pointer;
  }

  .el-icon-video-play:hover {
    font-weight: 700;
  }
}

.beisu {
  cursor: pointer;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #92949d;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;

  .parse {
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -120px;
    background: #fff;
    transition: height 0.4s;
  }
}

.span1:hover {
  color: #ff5478;
}

.beisu:hover .parse {
  cursor: pointer;
  height: 113px;
  padding: 4px 8px;
}

.parse div:hover {
  color: #ff5478;
}

.controls {
  padding: 0 15px;
  box-sizing: border-box;

  .jindu {
    width: 480px;
    height: 5px;
    border-radius: 3px;
    margin-left: 20px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;

    .jindufinish {
      position: absolute;
      left: 0;
      top: 0;
      height: 5px;
      width: 10px;
      border-radius: 3px;
      background: #ff5478;
      transition: width 0.2s;
    }
  }

  .tiem {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #92949d;
    margin-right: 20px;
  }

  .voice {
    width: 60px;
    height: 5px;
    // background: #e0e4eb;
    border-radius: 3px;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.example {
  ::v-deep .el-slider__runway {
    margin: 0;
  }

  ::v-deep .el-slider__button {
    width: 12px;
    height: 12px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    border: none;
  }

  ::v-deep .el-slider__bar {
    background: #ff5478;
  }
}

.dialogclass {
  ::v-deep .el-dialog__header .el-dialog__title {
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
  }

  ::v-deep .el-dialog {
    background: #ffffff;
    box-shadow: 2px 1px 4px 0px rgba(67, 72, 77, 0.3);
    border-radius: 10px;
  }

  .content {
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #686a71;
  }

  .con {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #686a71;
  }

  .radio {
    margin-top: 20px;
    margin-left: 60px;
    margin-bottom: 20px;
  }

  .avatar-uploader {
    margin-left: 60px;
    margin-top: 20px;
  }

  .avatar-uploader ::v-deep .el-upload {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #ff5478;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .sure {
    width: 110px;
    height: 38px;
    background: #ff5478;
    border-radius: 5px;
    margin-right: 20px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
  }

  .cancel {
    width: 110px;
    height: 38px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #686a71;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
  }
}

.xiazia {
  width: 100%;
  height: 48px;
  background: linear-gradient(-90deg, #ff5478, #f79bc0);
  border-radius: 5px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
  text-align: center;
  margin-bottom: 20px;
}

.xiazia1 {
  height: 20px;
  line-height: 20px;
}

.bodytitle {

  //   width: 1200px;
  //   margin: 0 auto;
  .bodylefts {
    width: calc(100% - 410px);
    min-width: 874px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 20px;
  }

  .title {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
    margin-bottom: 10px;
  }

  .cls {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #92949d;
    margin-bottom: 20px;
  }

  .fenqu {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #92949d;
    margin-bottom: 10px;

    span {
      cursor: pointer;
    }
  }

  #video {
    width: 100%;
    height: 488px;
    background-color: #000;
  }

  .loadings {
    // width: 870px;
    width: 100%;
    height: 488px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;

    .el-icon-loading {
      color: #fff;
      font-size: 30px;
      margin-left: 20px;
    }

    .icoloading {
      width: 80px;
      height: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .controls {
    height: 54px;
    // width: 870px;
    width: 100%;
    background: #f3f4f6;
    box-shadow: 0px 2px 4px 0px rgba(67, 72, 77, 0.1);
    border-radius: 0px 0px 5px 5px;
  }

  .h115 {
    height: 115px;
  }

  .w310 {
    margin-left: 30px;
    margin-top: 20px;
    width: 310px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
    padding: 30px;
  }

  .daw {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
    margin-left: 10px;
  }

  .guasnbds {
    width: 90px;
    height: 34px;
    background: #ff5478;
    border-radius: 5px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
    line-height: 34px;
    text-align: center;
  }

  .yihuan {
    border: 1px solid #ff5478;
    background: #fcf5f7;
    color: #ff5478;
  }

  .cent {}

  .mb20 {
    margin-bottom: 20px;
  }

  .xia {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #92949d;
    margin-right: 10px;
  }

  .hsnde {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
  }

  .spanhsnde {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // color: #ff5478;
    // padding: 3px 12px;
    margin-right: 10px;
    // background: #ffffff;
    // border: 1px solid #ff5478;
    border-radius: 2px;

    // word-break: break-all;
    ::v-deep .el-tag {
      margin-right: 10px;
      margin-top: 10px;
    }
  }

  .usj {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
  }

  .xina {
    height: 1px;
    background: #e5e5e5;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .duijian {
    margin-bottom: 20px;
  }

  .xiangguan {
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
  }

  .tl {
    width: 112px;
    height: 44px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2f3034;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .shijian {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #92949d;
  }

  .item {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
<style lang='scss' scoped>
.detals {
  width: 100%;
  // height: 936px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(67, 72, 77, 0.1);
  border-radius: 5px;
  margin-top: 20px;
  padding: 20px 30px;
  box-sizing: border-box;

  .chinse {
    height: 40px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #616267;
    border-bottom: 1px solid #e5e5e5;
  }

  .pingku {
    margin-right: 40px;
  }

  .colorActive {
    color: #2f3034;
    font-weight: 700;
  }

  .elimage {
    width: 601px;
    // height: 801px;
    background: hsl(235deg 12% 21%);
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    margin-top: 39px;
    // overflow: auto;
    position: relative;
  }
}
</style>
